<template>
  <canvas-template :item="item">
    <template v-slot:common>
      <canvas ref="wbCanvas" class="wb-bitmap-text" :style="styles"></canvas>
    </template>
  </canvas-template>
</template>
<script>
import { commonUtils } from '@/components/utils/common-utils'
import { canvasUtils } from '@/components/games/createjs/js/canvas-utils'
import CanvasTemplate from '@/components/games/createjs/canvas-template.vue'
import { EventBus } from '@/store/index'
import { BITMAP_TEXT_ITEM_TYPES_MAP } from '@/common/const-canvas'


export default {
  name: "WbBitmapText",
  mixins: [commonUtils, canvasUtils],
  components: {
    CanvasTemplate
  },
  setup () {
    return {
      isLoaded: false,
      bitmapText: null,
      keys: ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T",
      "U","V","W","X","Y","Z",",","!","?","."],
      frames: [
        [155, 2, 25, 41, 0, -10, -3],
        [72, 2, 28, 43, 0, -8, -1],
        [599, 2, 28, 38, 0, -8, -4],
        [41, 2, 27, 44, 0, -8, -1],
        [728, 2, 32, 38, 0, -6, -4],
        [184, 2, 35, 41, 0, -4, -2],
        [409, 2, 30, 39, 0, -7, -3],
        [443, 2, 29, 39, 0, -7, -3],
        [901, 2, 13, 35, 0, -8, -5],
        [698, 2, 26, 38, 0, -9, -4],
        [666, 2, 28, 38, 0, -8, -4],
        [764, 2, 23, 38, 0, -10, -4],
        [828, 2, 37, 36, 0, -3, -5],
        [567, 2, 28, 38, 0, -8, -4],
        [519, 2, 44, 38, 0, 1, -4],
        [869, 2, 28, 36, 0, -8, -5],
        [476, 2, 39, 38, 0, -2, -4],
        [371, 2, 34, 39, 0, -5, -3],
        [631, 2, 31, 38, 0, -6, -4],
        [289, 2, 39, 40, 0, -2, -3],
        [918, 2, 31, 32, 0, -6, -7],
        [791, 2, 33, 37, 0, -5, -4],
        [2, 2, 35, 46, 0, -4, 1],
        [253, 2, 32, 40, 0, -6, -3],
        [104, 2, 32, 43, 0, -6, -1],
        [332, 2, 35, 39, 0, -5, -4],
        [953, 2, 9, 16, 0, -17, -29],
        [140, 2, 11, 41, 0, -16, -1],
        [223, 2, 26, 41, 0, -7, -1],
        [966, 2, 9, 10, 0, -17, -31]
      ]
    };
  },
  created() {
    EventBus.$off("processFrame", this.onProcessFrame)
    EventBus.$on("processFrame", this.onProcessFrame)
  },
  mounted(){
    this.initCreatejs(window.createjs);
  },
  methods: {
    initCreatejs(createjs){
      if (!createjs || this.canvas) {
        return
      }
      let img = new Image();
      img.onload = () => {
        this.isLoaded = true
        this.refresh()
      }
      img.src = this.item.commonAttr.url
      this.initStage()
    },
    onProcessFrame({frame, relevantCompId}){
      if(this.item.id == relevantCompId && this.canvas){
        this.item.commonAttr.text = frame
        this.refresh()
      }
    },
    updateShape() {
      this.canvasWidHei()
      this.refresh()
    },
    refresh(){
      if(!this.isLoaded || !this.canvas){
        return
      }
      let commonAttr = this.item.commonAttr
      let stage = this.stage;
      let animations = {}
      let tempLists
      if(commonAttr.animations <= 0){
        tempLists = this.keys
      }else{
        tempLists = JSON.parse(commonAttr.animations)
      }
      _.forEach(tempLists, (name,  index) => {
        animations[name] = { frames: [index]}
      })
      let frames = []
      if(commonAttr.frames.length <= 0){
        frames = this.frames
      }else{
        frames = JSON.parse(commonAttr.frames)
      }
      if(this.bitmapText && this.bitmapText.parent){
        this.bitmapText.parent.removeChild(this.bitmapText)
      }
      if(commonAttr.url.length <= 0){
        return
      }
      let text_ = this.item.commonAttr.text;
      if(this.commonAttr.itemType == BITMAP_TEXT_ITEM_TYPES_MAP.date){
        if(text_.indexOf("{{month}}") != -1){
          text_ = new Date().getMonth() + 1;
        }else if(text_.indexOf("{{date}}") != -1 || text_.indexOf("{{day}}") != -1){
          text_ = new Date().getDate();
        }
        if(text_.toString().length == 0){
          text_ = '0' + text_;
        }
        text_ = text_.toString();
      }
      this.bitmapText = new window.createjs.BitmapText(text_, new window.createjs.SpriteSheet({
        images: [commonAttr.url],
        frames: frames,
        animations: animations
      }));
      let bounds = { width: frames[0][2], height: frames[0][3] };//this.bitmapText.getBounds();
      let scale = commonAttr.scale ? commonAttr.scale : 1
      this.bitmapText.x = this.canvas.width/2 - bounds.width/2*scale
      this.bitmapText.y = this.canvas.height/2 - bounds.height/2*scale
      this.bitmapText.scaleY = this.bitmapText.scaleX = scale;
      stage.addChild(this.bitmapText);
      stage.update();
    }
  },
  beforeUnmount(){
    EventBus.$off("processFrame", this.onProcessFrame)
  },
};
</script>
<style>
.wb-bitmap-text {
  width: inherit;
  height: inherit;
}
</style>


